<template>
	<!-- 加载状态组件 -->
	<uni-load-more :status="isLoadingStatus" v-if="isLoading" />
	<!-- 主滚动容器 -->
	<scroll-view v-else scroll-y @scrolltolower="onScrollToLower" class="my-page">
		<!-- 1. 个人资料卡片 -->
		<view class="profile-card" @click="navigateToUserInfo()">
			<!-- 头像区域 -->
			<view class="profile-image-container">
				<navigator url="/pagesMember/profile/profile" class="profile-navigator">
					<image class="profile-image" :src="userpic" mode="aspectFill"></image>
				</navigator>
			</view>
			<!-- 个人信息区域 -->
			<view class="profile-info">
				<!-- 用户名 -->
				<view class="user-name">
					{{ userInfo!.userName }}
				</view>
				<!-- 用户统计数据：关注、粉丝、获赞、拯救书荒 -->
				<view class="user-stats">
					<view class="stat-item" v-for="item in userStats" :key="item.name">
						<view class="stat-name">{{ item.name }}</view>
						<view class="stat-value">{{ item.value }}</view>
					</view>
				</view>
			</view>
			<!-- 右箭头图标 -->
			<view class="arrow-icon">
				<uni-icons type="right" size="30"></uni-icons>
			</view>
		</view>

		<!-- 2. 功能菜单区域 -->
		<view class="menu-container">
			<view class="menu-item" @click="navigateTo(item.path)" v-for="item in menuItems" :key="item.name">
				<uni-icons :type="item.type" size="30"></uni-icons>
				<text>{{ item.name }}</text>
			</view>
		</view>

		<!-- 3. 推荐书籍模块 -->
		<ZfCommonBookRecommend ref="bookRecommendRef" sourceType="推荐" />
	</scroll-view>
</template>

<script setup lang="ts">
	import { bookRecommendList } from "@/composables";
	import { onLoad } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { userInfo } from '@/stores/user';
	import { getUserStatsAPI } from "@/services/user";

	/**
	 * 加载状态标志
	 */
	const isLoading = ref(false);
	/**
	 * 加载状态文本
	 */
	const isLoadingStatus = ref('more');

	/**
	 * 用户统计数据
	 * @type {{ name: string; value: number; }[]}
	 */
	const userStats = ref([
		{ name: "关注", value: 0 },
		{ name: "粉丝", value: 0 },
		{ name: "获赞", value: 0 },
		{ name: "拯救书荒", value: 0 },
	]);

	/**
	 * 菜单项类型定义
	 */
	type MenuItem = {
		type : string;
		name : string;
		path : string;
	};

	/**
	 * 功能菜单列表
	 * @type {Ref<MenuItem[]>}
	 */
	const menuItems = ref<MenuItem[]>([
		{ type: "fire", name: "分享", path: "/pages/fenxiang/index" },
		{ type: "map", name: "学习", path: "/pages/task/stats/stats" },
		{ type: "videocam", name: "赞过的视频", path: "/pages/my/liked" },
		{ type: "info", name: "反馈与赞助", path: "/pages/my/feedback" },
		{ type: "mail-open", name: "我的预约", path: "/pages/my/reservation" },
		{ type: "gear", name: "设置", path: "/pages/my/setting/index" },
	]);

	/**
	 * 获取用户统计数据
	 */
	const fetchUserStats = async () => {
		const res = await getUserStatsAPI();
		userStats.value = [
			{ name: "关注", value: res.data.followCount },
			{ name: "粉丝", value: res.data.fansCount },
			{ name: "获赞", value: res.data.likeCount },
			{ name: "拯救书荒", value: res.data.recommendCount || 0 },
		];
	};

	/**
	 * 导航到指定页面
	 * @param path - 目标页面路径
	 */
	const navigateTo = (path : string) => {
		uni.navigateTo({
			url: path
		});
	};

	/**
	 * 导航到用户信息页面
	 */
	const navigateToUserInfo = () => {
		uni.navigateTo({
			url: '/pages/my/info/index'
		});
	};

	// 页面加载时执行
	onLoad(async () => {
		isLoadingStatus.value = 'loading';
		isLoading.value = true;
		await fetchUserStats();
		setTimeout(() => {
			isLoading.value = false;
			isLoadingStatus.value = 'more';
		}, 1000);
	});

	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getSystemInfoSync();

	// 书籍推荐组件相关
	const { bookRecommendRef, onScrollToLower } = bookRecommendList();
</script>

<style lang="scss">
	/* stylelint-disable */
	/* 页面容器 */
	.my-page {
		height: 100vh;
		/* 渐变色背景色 */
		background: linear-gradient(to bottom, #edcea7, #cfed8b, #4c90e9);

		/* 个人资料卡片 */
		.profile-card {
			height: 300rpx;
			margin: 30rpx 24rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			background-color: white;

			/* 头像容器 */
			.profile-image-container {
				flex: none;
				width: 150rpx;

				/* 头像导航 */
				.profile-navigator {
					display: block;

					/* 头像图片 */
					.profile-image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						border: 4rpx solid white;
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
					}
				}
			}

			/* 个人信息区域 */
			.profile-info {
				flex-grow: 1;
				margin: 0 30rpx;

				/* 用户名 */
				.user-name {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 16rpx;
				}

				/* 用户统计数据 */
				.user-stats {
					display: flex;
					gap: 24rpx;
					justify-content: space-around;

					/* 统计项 */
					.stat-item {
						display: flex;
						flex-direction: column;
						align-items: center;

						/* 统计名称 */
						.stat-name {
							font-size: 24rpx;
							color: #666;
							margin-bottom: 4rpx;
						}

						/* 统计值 */
						.stat-value {
							font-size: 20rpx;
							font-weight: 500;
							color: #222;
						}
					}
				}
			}

			/* 右箭头图标 */
			.arrow-icon {
				/* 图标样式由 uni-icons 组件控制 */
			}
		}

		/* 功能菜单容器 */
		.menu-container {
			height: 300rpx;
			margin: 24rpx;
			border-radius: 16rpx;
			background-color: white;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10rpx;
			padding: 24rpx;

			/* 菜单项 */
			.menu-item {
				height: 96rpx;
				padding: 0 36rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #222;
				white-space: nowrap;
			}
		}
	}
</style>